<template>
<div>
        <form action="">

             <loginTop middleTop="注册blibli" > 
                 <!-- 这是父组件， 使用 slot 去把整个内容传给子组件去渲染-->
                 <div slot="right" @click="$router.push('/login')">去登录</div>

             </loginTop>

            <loginText  label="姓名"
                style="margin:4vw 0;" 
                placeholder="请输入姓名" 
                rule="^.{6,16}$"
                @inputChange="res=>model.name = res"
            />

            <loginText label="账号" 
                placeholder="请输入账号" 
                rule="^.{6,16}$"
                @inputChange="res=>model.username = res"
            />

            <loginText label="密码" 
                placeholder="请输入密码"
                type="password"
                rule="^.{6,16}$"
                @inputChange="res=>model.password = res"
            />
        </form>
       

        <div class="res_login">
            <!-- <van-button color="#fb7299" plain>登录</van-button> -->
            <van-button color="#fb7299" @click="toRegister" class="login_register" >注册</van-button>
        </div>
        
        


</div>
</template>

<script>

import loginTop from "../components/common/loginTop.vue"
import loginText from "../components/common/loginText.vue"
import axios from "axios"

export default {
    data() {
        return {
            model:{
                name:"",
                username:"",
                password:""
            }

        };
    },


    methods: {
        
       async toRegister(){
            
            let rulg = /^.{6,16}$/
            
            if(rulg.test(this.model.name) && rulg.test(this.model.username) && rulg.test(this.model.password) ){// 三个条件都通过校验时

                //调用接口，然后接收接口返回的数据
                const res = await  this.$http.post('/register',this.model)
                
                //返回注册之后的状态码，注册成功为200，账号重复为302
                const code = res.data.code

                /* 
                    等个人中心页面完成再进行跳转任务--------------------
                */

                if(code==200){
                    this.$msg.success(res.data.msg)
                    localStorage.setItem("id",res.data.id)
                    localStorage.setItem("token",res.data.objtoken)
                    setTimeout(() => {
                        this.$router.push("/userinfo")
                        }, 1000);
                }else{
                    this.$msg.fail(res.data.msg)
                }

                
                
                
                
            }else{
                this.$message('三个输入框输入的需要在6~16位数之间');//element-ui组件
            }
        

       },



    },

    components:{
        loginTop,loginText
    }


}
</script>


<style scoped>
    
    .res_login{
        display: flex;
        justify-content:  space-between;
        align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .res_login button{
        width: 34.667vw;
        margin:4vw 4vw;
        /* font-size: 4.8vw !important; */
        font-weight: 545;
    }

    .login_register{
            font-size: 22px !important;
            border-radius: 5px;
    }


    



</style>